<template>
  <div class='container'>
    <!-- btn添加按钮 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <p class="title">说明：目前支持学科和关键字条件筛选</p>
      </el-col>
      <el-col :span="2">
        <el-button type="success" @click="$router.push(`/questions/new`)">
          <i class="el-icon-edit">新增试题</i>
        </el-button>
      </el-col>
    </el-row>

    <!-- form表单按钮 -->
    <el-form ref="form" :model="tableData" label-width="80px">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select v-model="tableData.subjectID" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="tableData.catalogID" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in catalogID" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="tableData.tags" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in subjectTags" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="tableData.keyword" placeholder="请选择" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="tableData.questionType" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in questionType" :key='item.value' :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="tableData.difficulty" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="tableData.direction" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in  direction" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="tableData.creatorID" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in creatorID" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="tableData.remarks">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="tableData.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-row type="flex">
              <el-col :span="12" style="marginRight:10px">
                <el-select @change="changeCity" v-model="tableData.province" placeholder="请选择" style="width: 100%">
                  <el-option v-for="(v, k, i) in province" :key="i" :label="v" :value="v">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select v-model="tableData.city" placeholder="请选择" style="width: 100%">
                  <el-option v-for="(v, k, i) in city" :key="i" :label="v" :value="v">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-col :span="10">
              <el-button size="small" @click="clear">清除</el-button>
              <el-button type="primary" size="small" @click="searchBtn">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 获取简单的学科列表
import { simple as subjectList } from '@/api/hmmm/subjects'
// 获取简单的二级目录
import { simple as secondDirectory } from '@/api/hmmm/directorys.js'
// 获取所有标签
import { simple as Tags } from '@/api/hmmm/tags.js'
// 获取所有的试题类型,  所有的困难，所有的方向
import { questionType as questionTypearr, difficulty as difficultyArr, direction as directionArr } from '@/api/hmmm/constants.js'
// 获取所有的省份，地区
import { provinces, citys } from '@/api/hmmm/citys.js'
// 筛选
import { list as searchArr } from '../../api/hmmm/questions'
export default {
  data() {
    return {
      tableData: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keywords: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 反向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: [], // 城市
        city: '' // 区域
      },
      subjectList: [], // 所有的学科列表
      catalogID: [], // 二级目录,
      subjectTags: [], // 标签
      questionType: questionTypearr, // 所有的试题类型
      difficulty: difficultyArr, // 所有的困难
      direction: directionArr, // 所有的方向
      creatorID: ['超级管理员', '录入管理员'], // 管理员
      province: null,
      city: null
    }
  },
  watch: {
    // 监听输入框的变化
    'tableData.subjectID'(newvalue, oldvalue) {
      // 给二级目录重新赋值
      this.secondDirectory(newvalue)
      // 清空二级目录的值
      this.tableData.catalogID = ''
      // 给标签重新赋值
      this.Tags(newvalue)
      // 清空标签的值
      this.tableData.tags = ''
    },
    deep: true,
    immediate: true
  },
  created() {
    // 获取简单的学科
    this.list()
    // 获取简单的二级目录
    this.secondDirectory()
    // 获取所有的标签
    this.Tags()
    // 获取所有的省份
    this.province = provinces()
    // 获取所有的区域
    this.city = citys()
  },
  methods: {
    // 获取简单的学科
    async list() {
      const res = await subjectList()
      // console.log(res)
      this.subjectList = res.data
    },
    // 获取简单的二级目录
    async secondDirectory(id) {
      const res = await secondDirectory({ subjectID: id })
      // console.log(res)
      this.catalogID = res.data
    },
    // 获取所有的标签
    async Tags(id) {
      const res = await Tags({ subjectID: id })
      this.subjectTags = res.data
    },
    // 获取所有省份下的区域
    changeCity(value) {
      // console.log(value)
      // console.log(citys(value))
      this.city = citys(value)
    },
    // 清空按钮
    clear() {
      this.tableData = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keywords: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 反向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: [], // 城市
        city: '' // 区域
      }
    },
    // 搜索按钮
    // 点击筛选按钮，根据输入或选择的筛选条件，查询第一页基础题库数据且渲染列表。
    async searchBtn() {
      const res = await searchArr(this.tableData.subjectID)
      // console.log(this.tableData.subjectID)
      const e = res.data.items.filter(item => {
        if (item.subjectID === this.tableData.subjectID) {
          return item
        }
      })
      this.$emit('chuan', e)
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 12px;
  color: pink;
}
.el-form {
  margin: 10px 0 0;
}
</style>
